import React, { Component } from 'react';
import Husband from './components/Husband';
import Wife from './components/Wife';

/*
  学习目标：使用状态提升，实现Wife组件花钱的功能
  步骤：
     1. 将Husband的state提升到App组件中， 父传子money传给husband
     2. 通过子传父技术，实现赚钱功能
     3. 通过子传父技术，实现花钱
*/

export default class App extends Component {
  //  1. 将Husband的state提升到App组件中， 父传子money传给husband
  state = {
    money: 0,
  };

  handleMakeMoney = () => {
    this.setState({ money: this.state.money + 1000 });
  };

  handleCost = (num) => {
    this.setState({ money: this.state.money - num });
  };
  render() {
    const { money } = this.state;
    return (
      <div>
        <h1 style={{ textAlign: 'center' }}>家庭存款： {money}</h1>
        {/* 2. 通过子传父技术，实现赚钱功能 */}
        <Husband money={money} handleMakeMoney={this.handleMakeMoney}></Husband>
        <hr />
        {/*  3. 通过子传父技术，实现花钱 */}
        <Wife handleCost={this.handleCost}></Wife>
      </div>
    );
  }
}
